<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>{{event.code}} - Cmatic Scoring</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/bootstrap/css/cmatic.css" rel="stylesheet">
    <link href="/static/bootstrap/css/bootstrap-dataTables.css" rel="stylesheet">
    <style type="text/css">
      body {
        padding-top: 60px;
        padding-bottom: 40px;
      }
      .plain-text-box {
        background-color: inherit;
        border-style: None;
        box-shadow: None;
      }
      .error-row {
        color: #b94a48;
      }
    </style>
    <link href="/static/bootstrap/css/bootstrap-responsive.css" rel="stylesheet">

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="images/favicon.ico">
    <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
    <script>
      var completed = {% if event.completed %}true{%else%}false{%endif%};
      var get_url = "/get";
      var set_url = "/set";
      var eventId = {{event.pk}};
      var isNandu = {{is_nandu}};
      var old_records = new Array();  
      var undo_records = new Array(); // 1 Undo state will be stored here
      var ongoing = {% if event.ongoing %}true{%else%}false{%endif%};
    </script>
  </head>

  <body>
    <!--- This modal is displayed if the event has not yet begun --->
    <div class="modal fade" id="start_event_modal">
      <div class="modal-header">
        <h3>This event has not begun yet</h3>
      </div>
      <div class="modal-body">
        <p><b>To begin this event, press "Start".</b>  Otherwise, close this tab.</p>
      </div>
      <div class="modal-footer">
        <a href="#" class="btn btn-primary" id="start_event">Start</a>
      </div>
    </div>

    <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="/{{event.ring}}">Cmatic</a>
            <ul class="nav">
              <li><a href="/">Home</a></li>
              <li><a href="/{{event.ring}}">Ring {{event.ring}}</a></li>
              <li class="active"><a href="/event/{{event.code}}">{{event.code}}</a></li>
            </ul>
            <ul class="nav pull-right"> 
              {% if not event.completed %}
                <li><button class="btn btn-success" id="finish">Finish Event</button></li>
              {% else %}
                <li><button class="btn btn-success" id="finish">Undo Finish Event</button></li>
              {% endif %}
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>

    <div class="container">
      <h1>{{event.form.name}}
        <small>{{event.division.name}} - {{event.sex.name}} - {{event.age_group.name}}</small>
      </h1>
      <div class="alert alert-info" id="infobar"> 
        Loading...
      </div>

      <div class="row">
        <div class="span12">  
          <table class="table table-striped table-bordered" id="scoring_table">
            <thead>
              <tr>
                <th>Competitor</th>
                <th>Score 1</th>
                <th>Score 2</th>
                <th>Score 3</th>
                <th>Score 4</th>
                <th>Score 5</th>
                <th>Time (sec)</th>
                <th>Deduction</th>
                <th>Time Deduction</th>
                <th>Final</th>
                <th>Place</th>
                <th>Save</th>
              </tr>
            </thead>
            <tbody>
              <form class="form-inline">
              {% for scoring in scores|dictsort:"placement" %} 
                <tr id="score-{{scoring.id}}" class="competitor">
                  <td class="control-group">{{scoring.competitor.firstName}} {{scoring.competitor.lastName}}</td>
                  <td class="control-group"><input class="input-tiny score1 {% if forloop.first %}autofocus{% endif %}" type="text" name="score1" placeholder="score1"  value="{%if scoring.score0 %}{{scoring.score0}}{%endif%}"></td>
                  <td class="control-group"><input class="input-tiny score2" type="text" name="score2" placeholder="score2" value="{%if scoring.score1%}{{scoring.score1}}{%endif%}"></td>
                  <td class="control-group"><input class="input-tiny score3" type="text" name="score3" placeholder="score3" value="{%if scoring.score2%}{{scoring.score2}}{%endif%}"></td>
                  <td class="control-group"><input class="input-tiny score4" type="text" name="score4" placeholder="score4" value="{%if scoring.score3%}{{scoring.score3}}{%endif%}"></td>
                  <td class="control-group"><input class="input-tiny score5" type="text" name="score5" placeholder="score5" value="{%if scoring.score4%}{{scoring.score4}}{%endif%}"></td>
                  <td class="control-group"><input class="input-tiny time" type="text" name="time" placeholder="time" value="{%if scoring.time %}{{scoring.time}}{%endif%}"></td>
                  <td class="control-group"><input class="input-tiny deduct" type="text" name="deduct" placeholder="deduct" value="{%if scoring.otherDeduction%}{{scoring.otherDeduction}}{%endif%}"></td>
                  <td class="control-group"><input class="input-tiny time_deduct" type="text" name="other_deduct" placeholder="t. deduct" value="{%if scoring.timeDeduction%}{{scoring.timeDeduction}}{%endif%}"></td>
                  <td class="control-group"><span class="final" id="final">
                    {% if scoring.finalScore %}{{scoring.finalScore|floatformat:2}}{% else %}N/A{% endif %}
                  </span></td>
                  <td class="control-group"><span class="place" id="place">
                    {% if scoring.placement %}{{scoring.placement}}{% else %}N/A{% endif %}
                  </span></td>
                  <td class="control-group">
                    <span class="save-button btn btn-primary">Save</span>
                    <span class="unlock-button btn btn-success hidden">Unlock</span>
                  </td>
                </tr>
              {% endfor %}
              </form>
            </tbody>
          </table>
        </div>
      </div>

      <hr>

      <footer>
        <p>
          <span class="label label-important">Important note:</span>
          Please remember to press "Finish Event" when the event has completed.  Thank you!
        </p>
        <p>&copy; CalWushu 2012</p>
        {% if times %}
          <p>{{times}}</p>
        {% endif %}
      </footer>

    </div> <!-- /container -->

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="/static/bootstrap/js/jquery.js"></script>
    <script src="/static/bootstrap/js/jquery.dataTables.js"></script>
    <script src="/static/bootstrap/js/bootstrap-modal.js"></script>
    <script src="/static/bootstrap/js/bootstrap-tooltip.js"></script>
    <script src="/static/event.js"></script>
    <script src="/static/bootstrap/js/bootstrap-collapse.js"></script>
  </body>
</html>
